<template>
	<div id="Searchbox">
		<div id="search">
			 <!-- 搜索框 -->
			 <form action="/">
			   <van-search v-model="value" background='#F2F2F2' shape='round' placeholder="原创作品 / 电子书 / 作者 / 译者 / 出版社" autofocus='true' @search="onSearch">
					<template #left-icon>
						<van-icon class-prefix='iconfont' name='sousuo' size="20"/>
					</template>
			   </van-search>
			 </form>
		</div> 
				 
		<!-- 搜索列表 -->
		<div id="searchList">
			<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
			  <div v-for="item in mySearch" @click="detail(item.id,item.type)">
				  <van-cell :key="item.alias_id">
						<van-card :thumb="item.cover">
							<!-- 标题 -->
							 <template #title>
								<h3>{{item.title}}<small v-if="item.kind">{{item.kind}}</small></h3>
							  </template>
							
							<!-- 详情 -->  
							  <template #desc>
								<p class="author" v-if="item.author">{{item.author}}</p>
								<div>
									<p v-if="item.has_finished" class="bookkind">已完结，共{{item.on_sale_num}}篇</p>
									<p v-else class="bookkind">已发表{{item.on_sale_num}}篇</p>
								</div>
								<p class="detail" v-if="item.abstract">{{item.abstract}}</p>
							  </template>
							  
							  <template #price>
								<p v-if="item.in_library_count">{{item.in_library_count}} 加入书架</p>
								<!-- <p v-if="!item.price">{{item.in_library_count}} 加入书架</p>
								<p v-else class="price"><small>￥</small>{{item.price}}</p> -->
							  </template>
				  
						</van-card>
				  </van-cell>
			  </div>
			</van-list>
		</div>
		
	</div>
</template>

<script>
	import Vue from 'vue';
	import { Toast } from 'vant';

	export default {
	  data() {
	    return {
	      value: '',
		  list: [],
		  loading: false,
		  finished: false
	    };
	  },
	 
	  methods: {
	    onSearch(val) {
	      Toast(val);
	    },
		
		onLoad() {
			
			this.$store.dispatch('getSearch')

	// 		// 加载状态结束
	// 		this.loading = false;
	
	// 		// 数据全部加载完成
	// 		if (this.list.length >= 40) {
	// 		  this.finished = true;
	// 		}
		},
		
		detail(id,type){
			// this.$store.dispatch('getBookDetail',id)
			// this.$store.dispatch('getBookDirectory',id)
			
			this.$router.push({
				path:'/details',
				query:{
					bookId:id
					// bookType:type
				}
			})
		}
	  },
	  components:{
	  },
	  computed:{
		  mySearch(){
			  return this.$store.state.searchList.filter(item=>item.title.includes(this.value))
		  }
		  
	  },
	  mounted() {
		  // 数据没加载出来时页面的高度
	  	 var dHeight= document.documentElement.clientHeight
	  	 var Searchbox = document.querySelector('#Searchbox')
	  	  Searchbox.offsetHeight<dHeight?Searchbox.style.height='100vh':Searchbox.style.height='auto'
	 
	  },
	}
</script>

<style lang="scss">
	#search{
		box-shadow: 0.0625rem 0.0625rem 0.0625rem #ccc;
		// position: sticky;
		// top: 0;
		// z-index: 666;
		
		.van-search__content{
			justify-content: center;
			background-color: white;
			box-shadow: inset 0 0.0625rem 0.0625rem 0 rgb(0 0 0 / 10%);
			margin-left: 2.5rem;
		}
	}
	
	// 搜索列表
	#searchList{
		.van-cell{
			padding: 0;
			border-bottom: 0.0625rem solid #ddd;
		}
		.van-card{
			font-size: 0.875rem;
			
			.van-card__content{
				padding: 0 0.3125rem;
				box-sizing: border-box;
				
				h3{
					display: flex;
					align-items: center;
					small{
						font-size: 0.625rem;
						background-color: #389eac;
						color: white;
						padding: 0.125rem 0.1875rem 0.0625rem;
						box-sizing: border-box;
						line-height: 1;
						margin-left: 0.3125rem;
					}
				}
			}
			.van-card__bottom{
				margin-top: 0.625rem;
				
				.van-card__price{
					font-size: 0.875rem
				}
			}
			
			p{
				color: #A6A6A6;
			}
			.detail{
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
			}
			.bookkind{
				margin: 0.625rem 0 0.9375rem;
			}
			.author{
				margin-top: 0.125rem;
			}
			// .price{
			// 	color: #389eac;
			// 	font-size: 0.875rem;
			// 	font-weight: 700;
			// }
		}
		
		// 图片
		.van-card__thumb{
			width: 30%;
			height: 52%;
		}
	}
</style>